extends ../layout/layout.pug

block head
    - var title = ""
    include ../layout/head-en.pug

block content
    main(class="home")
        div(style="position: absolute;overflow: hidden;height: 100%;width: 100%;")
            img(class="home__bg" src="https://b3log.org/siyuan/static/home.svg")
        - var headerClass = "header"
        include ../layout/header-en.pug
        div(class="home__panel wrapper")
            div(class="home__side")
                h2(class="home__slogan") Refactor your thinking
                h2(class="home__keywords") WYSIWYG&nbsp;
                    span(class="feature__title--nowrap") Block Ref
                    br
                    | E2EE Sync&nbsp;
                    span(class="feature__title--nowrap") Privacy-first
                div(class="feature__hr")
                p(class="home__desc") SiYuan is a privacy-first personal knowledge management system that supports complete offline usage, as well as end-to-end encrypted data sync.
                    br
                    br
                    | Fuse blocks, outlines, and bidirectional links to refactor your thinking.
            div(class="home__img")
                img(src="https://b3log.org/siyuan/static/feature0.png")
                div(class="feature__hr")
                div(class="feature__hr")
                a(style="padding: 16px 64px;width:auto;white-space:nowrap" href="download.html" class="home__download") Free download to use
        svg(xmlns="http://www.w3.org/2000/svg" fill="none" preserveAspectRatio="none" viewBox="0 0 1680 40" style="z-index:1;bottom: 0;position: absolute;")
            path(d="M0 40h1680V30S1340 0 840 0 0 30 0 30z" fill="#fff")
    div(class="wrapper")
        div(id="slogan" class="second__type")
        div(class="feature__hr")
        div(class="feature__imgs animate animate__scale")
            img(src="https://b3log.org/siyuan/static/img-bg.svg" style="position:absolute;left:10%;width: 90%; top: 50%; transform: translateY(-50%);")
            img(style="position: relative" src="https://b3log.org/siyuan/static/home-img.png")
    div(class="feature__hr")
    div(class="feature__hr")
    div(class="navigation")
        div(class="navigation__warp wrapper")
            div(class="item" data-id="feature1")
                span Block editing
            div(class="item" data-id="feature2")
                span Flashcards & Database & AI
            div(class="item" data-id="feature3")
                span Bidirectional link
            div(class="item" data-id="feature4")
                span List outline
            div(class="item" data-id="feature5")
                span Privacy & Sync
            a(style="width: auto;padding: 8px 48px;margin-bottom: 0;align-self: center;" href="download.html" class="home__download") Download
    div(class="feature wrapper" id="feature1")
        div(class="feature__hr")
        div(class="fn__flex")
            div(class="feature__space")
            div(class="feature__info")
                h2(class="feature__title feature__title--1") Block editing
                div(class="feature__hr")
                h3(class="feature__desc")
                    In SiYuan, the only important core concept is Content block.
                    span(class="feature__primary")  The content block can be formed through the formatting format, so that we can organize our thoughts and knowledge at the block-level granularity, and it is also convenient for reading and outputting long content.
        div(class="feature__hr")
        div(class="feature__imgs animate animate__scale")
            img(src="https://b3log.org/siyuan/static/img-bg.svg" style="position:absolute;left:0;width: 117.31%; margin: 0 -8.65%; top: 50%; transform: translateY(-50%);")
            img(style="position: relative" src="https://b3log.org/siyuan/static/feature1-1.png")
        div(class="feature__hr")
        div(class="feature__hr")
        div(class="feature__two")
            div(class="feature__info animate animate__left")
                h2(class="feature__title feature__primary") Elements
                div(class="feature__hr")
                h3(class="feature__desc") Built-in 20+ types of block-level elements and 10+ span-level elements.
                    span(class="feature__primary")  Rich elements meet common typesetting needs, and more specialized needs can be extended through widget blocks.
            div(class="feature__space")
            div(class="feature__imgs fn__flex-1 animate__scale animate")
                img(src="https://b3log.org/siyuan/static/img-bg2.svg" style="position:absolute;left:0;width: 150%; margin: 0 -25%; top: 50%; transform: translateY(-50%);")
                img(class="feature__img" src="https://b3log.org/siyuan/static/feature1-2.png")
            div(class="feature__space")
        div(class="feature__hr")
        div(class="feature__hr")
        div(class="fn__flex")
            div(class="feature__space")
            div(class="feature__info")
                h2(class="feature__title feature__title--1") Zoom-in
                div(class="feature__hr")
                h3(class="feature__desc") Going into block focus, let's focus more on the content of the current block.
                    span(class="feature__primary")  All blocks support zoom-in focus, easily switch in context with breadcrumb navigation.
        div(class="feature__hr")
        div(class="feature__imgs animate animate__scale")
            img(src="https://b3log.org/siyuan/static/img-bg.svg" style="position:absolute;left:0;width: 117.31%; margin: 0 -8.65%; top: 50%; transform: translateY(-50%);")
            img(style="position: relative;max-width: 100%" class="feature__img" src="https://b3log.org/siyuan/static/feature1-3.png")
        div(class="feature__hr")
        div(class="feature__hr")
        div(class="feature__two")
            div(class="feature__info animate animate__left")
                h2(class="feature__title feature__primary") Million words
                div(class="feature__hr")
                h3(class="feature__desc")
                    span(class="feature__primary") Editing of large documents is also possible.
                    |  Through dynamic loading technology, large documents with millions of words can be edited smoothly on ordinary computers.
            div(class="feature__space")
            div(class="feature__imgs fn__flex-1 animate__scale animate")
                img(src="https://b3log.org/siyuan/static/img-bg2.svg" style="position:absolute;left:0;width: 150%; margin: 0 -25%; top: 50%; transform: translateY(-50%);")
                img(class="feature__img" src="https://b3log.org/siyuan/static/feature1-4.png")
            div(class="feature__space")
    div(class="feature feature--2 wrapper" id="feature2")
        div(class="fn__flex")
            div(class="feature__space")
            div(class="feature__space")
            div(class="feature__space")
            div(class="feature__info")
                h2(class="feature__title")
                    div(class="feature__title--2") Spaced repetition
                    | By&nbsp;
                    a(target="_blank" href="https://github.com/open-spaced-repetition/free-spaced-repetition-scheduler") FSRS
                    | &nbsp;Algorithm
        div(class="feature__hr")
        div(class="feature__two feature__two--row")
            div(class="feature__space")
            div(class="feature__space")
            div(class="feature__space")
            div(class="feature__info animate__left animate")
                h3(class="feature__desc")
                    span(class="feature__black") Improve memory efficiency, adjust learning effects, optimize time allocation, and increase learning motivation.
                    |&nbsp;By effectively reviewing what you have learned, you can discover your own progress and achievements, and then enhance your
                    em confidence and self-identity.
            div(class="feature__space")
            div(class="feature__imgs fn__flex-1")
                img(class="feature__img feature__img--white animate__right animate" src="https://b3log.org/siyuan/static/feature2-4.png")
        div(class="feature__hr")
        div(class="feature__hr")
        div(class="fn__flex")
            div(class="feature__space")
            div(class="feature__space")
            div(class="feature__space")
            div(class="feature__info")
                h2(class="feature__title")
                    div(class="feature__title--2") Database
                    | Support relation, rollup and template
        div(class="feature__hr")
        div(class="feature__two feature__two--row")
            div(class="feature__space")
            div(class="feature__space")
            div(class="feature__space")
            div(class="feature__info animate__left animate")
                h3(class="feature__desc")
                    span(class="feature__black") The two databases can be connected through "relation" to achieve linkage management.
                    |&nbsp;Rollup knowledge,&nbsp;
                    em stay on top of things.
            div(class="feature__space")
            div(class="feature__imgs fn__flex-1")
                img(class="feature__img feature__img--white animate__right animate" src="https://b3log.org/siyuan/static/feature2-5.png")
        div(class="feature__hr")
        div(class="feature__hr")
        div(class="fn__flex")
            div(class="feature__space")
            div(class="feature__space")
            div(class="feature__space")
            div(class="feature__info")
                h2(class="feature__title")
                    div(class="feature__title--2") Artificial Intelligence
                    | Access&nbsp;
                    a(href="https://openai.com/" target="_blank") OpenAI
        div(class="feature__hr")
        div(class="feature__two feature__two--row")
            div(class="feature__space")
            div(class="feature__space")
            div(class="feature__space")
            div(class="feature__info animate__left animate")
                h3(class="feature__desc")
                    span(class="feature__black") It can help us continue writing, translate, extract abstracts, brainstorm, correct grammar, spelling and typos.
                    |&nbsp;Answer any interesting questions,&nbsp;
                    em efficient assistance.
            div(class="feature__space")
            div(class="feature__imgs fn__flex-1")
                img(class="feature__img feature__img--white animate__right animate" src="https://b3log.org/siyuan/static/feature2-3.png")

    div(class="feature wrapper" id="feature3" style="overflow: initial;position: relative;")
        div(class="feature__hr")
        div(style="text-align: center")
            h2(class="feature__title")
                span(class="feature__primary") Bidirectional link
                span(class="feature__title--3 feature__title--nowrap")  Block-level
        div(class="feature__hr")
        div(class="feature__hr")
        div(class="feature__hr")
        div(class="feature__hr")
        div(class="fn__flex")
            div(class="feature__space")
            div(class="feature__info feature__info--small" id="block1")
                h3(class="feature__desc") Documentation page are also blocks, reducing mental load.
                    span(class="feature__primary")  All content exists on a block basis, and documentation pages are no exception. Blocks can be converted to each other, splitting, reorganizing and moving do not affect existing links.
        div(class="feature__height")
        div(class="fn__flex")
            div(class="feature__space")
            div(class="feature__info feature__info--small" id="block2")
                h3(class="feature__desc") Backlinks reflect bidirectional link value.
                    span(class="feature__primary")  Discover potential knowledge associations through backlink mentions, and convert mentions into links to solidify the association structure. The backlink panel supports filtering and searching, making the connection of knowledge easier and more efficient.
        div(class="feature__height")
        div(class="fn__flex")
            div(class="feature__space")
            div(class="feature__info feature__info--small" id="block3")
                h3(class="feature__desc") Explore the link graph.
                    span(class="feature__primary")  A bird's-eye view of the knowledge structure distribution through a global relationship graph, and a focus on knowledge link paths through a block-level focused relationship graph. Visualize the growth of knowledge, and watch the decompression in your spare time, which is pleasing to the eye.
        div(class="feature__height2")
        div(class="feature__img1")
            div(class="feature__img2")
                img(class="feature__img" id="blockImg" style="width: 100%;max-width: none;height: 86vh;border-radius: 8px 0 0 8px;object-fit: none;object-position: left top;" src="https://b3log.org/siyuan/static/feature3-1.png")
                img(src="https://b3log.org/siyuan/static/img-bg3.svg" style="top: -34%;left: -100%;width: 200%;position: absolute;max-width: none;height: 120vh;")
    div(class="feature feature--2 wrapper" id="feature4")
        div(style="text-align: center")
            h2(class="feature__title") List outline
                div(class="feature__title--4")  Sort out the main points, logically layered
        div(class="feature__hr")
        div(class="feature__two")
            div(class="feature__info animate__left animate feature__info--smaller")
                h3(class="feature__desc")
                    span(class="feature__black") This outline is not that outline.
                    |  List outlines are mostly used to quickly organize knowledge with logical levels, which are simple, efficient, and intuitive.
            div(class="feature__space")
            div(class="feature__imgs fn__flex-1 animate__scale animate")
                img(class="feature__img feature__img--white" style="max-width: 100%" src="https://b3log.org/siyuan/static/feature4-1.png")
        div(class="feature__hr")
        div(class="feature__hr")
        div(class="feature__two feature__two--row")
            div(class="feature__info animate__left animate feature__info--smaller")
                h2(class="feature__title feature__title--4") Folding
                br
                h3(class="feature__desc") Folding is one of the core operations of the list outline. It hides details and outlines by folding. In SiYuan, the title block also has the same powerful folding, and the document outline and the list outline complement each other.
            div(class="feature__space")
            div(class="feature__imgs fn__flex-1 animate__scale animate")
                img(class="feature__img feature__img--white" style="max-width: 100%" src="https://b3log.org/siyuan/static/feature4-2.png")
        div(class="feature__hr")
        div(class="feature__hr")
        div(class="feature__two")
            div(class="feature__info animate__left animate feature__info--smaller")
                h3(class="feature__desc")
                    span(class="feature__black") The list outline can also have rich typography.
                    |  Documented records can be made under each outline item, so that the document and the outline can be fully integrated, and the knowledge structure can be carried out to the end.
            div(class="feature__space")
            div(class="feature__imgs fn__flex-1 animate__scale animate")
                img(class="feature__img feature__img--white" style="max-width: 100%"
                     src="https://b3log.org/siyuan/static/feature4-3.png")

    div(id="feature5" class="feature wrapper")
        div(class="feature__hr")
        div(class="fn__flex")
            div(class="feature__space")
            div(class="feature__info")
                h2(class="feature__title feature__primary")
                    div(class="feature__title--5") Privacy security
                    | Encrypted cloud, worry-free privacy
                div
                    a(href="privacy.html" class="feature__a feature__a--white")
                        span Privacy Policy
                        svg(class="octicon" height="16" viewBox="0 0 16 16" width="16" fill="#fff")
                            path(clip-rule="evenodd" d="m8.21967 2.96967c.29289-.29289.76777-.29289 1.06066 0l4.24997 4.25c.2929.29289.2929.76777 0 1.06066l-4.24997 4.24997c-.29289.2929-.76777.2929-1.06066 0s-.29289-.7677 0-1.0606l2.96963-2.9697h-7.4393c-.41421 0-.75-.33579-.75-.75s.33579-.75.75-.75h7.4393l-2.96963-2.96967c-.29289-.29289-.29289-.76777 0-1.06066z" fill-rule="evenodd")
        div(class="feature__hr")
        div(class="feature__hr")
        div(class="feature__two feature__two--row wrapper")
            div(class="feature__space")
            div(class="feature__info")
                h3(class="feature__desc animate__left animate")
                    span(class="feature__primary") Data is stored entirely on the device under the control of the user.&nbsp;
                    | Even if there is no network, even if the cloud service is down, it can still be used locally without restrictions.&nbsp;
                    em No offline, no notes.
            div(class="feature__space")
            div(class="feature__imgs fn__flex-1")
                img(class="feature__img feature__img--red animate__scale animate" src="https://b3log.org/siyuan/static/feature2-1.svg")
        div(class="feature__hr")
        div(class="feature__hr")
        div(class="feature__two feature__two--row wrapper")
            div(class="feature__space")
            div(class="feature__info")
                h3(class="feature__desc animate__left animate")
                    span(class="feature__primary") Mobile server.&nbsp;
                    | Not just an app, it can also be used as a mobile server, as long as the computer and mobile phone are in a local area network, you can directly use SiYuan on the mobile phone through the computer browser.&nbsp;
                    em Personal privacy and knowledge wealth cannot be coveted by others.
            div(class="feature__space")
            div(class="feature__imgs fn__flex-1")
                img(class="feature__img feature__img--red animate__scale animate"
                    src="https://b3log.org/siyuan/static/feature2-2.png")
        div(class="feature__hr")
        div(class="feature__hr")

        div(class="fn__flex")
            div(class="feature__space")
            h2(class="feature__title feature__primary") Multi-device data sync
                div(class="feature__title--5") Keep data complete and consistent
        div(class="feature__hr")
        div(class="feature__hr")
        div(class="feature__two feature__two--row wrapper")
            div(class="feature__space")
            div(class="feature__info")
                h3(class="feature__desc animate__left animate")
                    span(class="feature__primary") End-to-end encrypted data sync&nbsp;
                    | End-to-end encryption technology ensures privacy and security, and incremental sync technology saves traffic and improves data sync efficiency.
            div(class="feature__space")
            div(class="feature__imgs fn__flex-1")
                img(class="feature__img feature__img--red animate__scale animate" src="https://b3log.org/siyuan/static/feature5-1.svg")
        div(class="feature__hr")
        div(class="feature__hr")
        div(class="feature__two feature__two--row wrapper")
            div(class="feature__space")
            div(class="feature__info")
                h3(class="feature__desc animate__left animate")
                    span(class="feature__primary") Mobile server&nbsp;
                    | Not just an app, it can also be used as a mobile server, as long as the computer and mobile phone are in a local area network, you can directly use SiYuan on the mobile phone through the computer browser.
            div(class="feature__space")
            div(class="feature__imgs fn__flex-1")
                img(class="feature__img feature__img--red animate__scale animate" src="https://b3log.org/siyuan/static/feature5-2.svg")
        div(class="feature__hr")
        div(class="feature__hr")
        div(class="feature__two feature__two--row wrapper")
            div(class="feature__space")
            div(class="feature__info")
                h3(class="feature__desc animate__left animate")
                    span(class="feature__primary") Docker server&nbsp;
                    | Deploy SiYuan on the server through the Docker image to build your own cloud notes, and control the access rights through the authorization code, which is convenient for multiple people to collaborate.
            div(class="feature__space")
            div(class="feature__imgs fn__flex-1")
                img(class="feature__img feature__img--red animate__scale animate" src="https://b3log.org/siyuan/static/feature5-3.svg")
    include ../layout/footer-en.pug

